<template>
  <div>
    <el-form ref='form' :model='form' label-width='100px'>
      <el-form-item label='实验类型'>
        <el-select v-model='form.region' placeholder='请选择'>
          <el-option v-for='(item, index) in dependencyList.experitypes' :key='index' :label='item.name' :value='item.id'>{{item.name}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='排课名称' style='width: 300px'>
        <el-input v-model='form.name'></el-input>
      </el-form-item>
      <el-form-item label='排课规则'>
        <el-radio-group v-model='form.ruleType'>
          <el-radio  v-for='(item, index) in dependencyList.ruleTypes' :key='index' :label='index' >{{ item }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label='星期几'>
        <el-checkbox-group v-model='form.weekDays'>
          <el-checkbox v-for='(item, index) in dependencyList.weekDays' :key='index' :label='index'>{{ item }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label='可预约时间'>
        <el-checkbox-group v-model='form.timeSlots'>
          <el-checkbox v-for='(item, index) in dependencyList.timeSlots' :key='index' :label='index'>{{ item.timeSlotName }}（{{ item.startTime }} —— {{ item.endTime }}）</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label='从第几周开始'>
        <el-input-number v-model='form.startWeek' controls-position='right' :min='1' :max='21'></el-input-number>
      </el-form-item>
      <el-form-item label='有几周课'>
        <el-input-number v-model='form.weekCount' @change="getWeekCount" controls-position='right' :min='1' :max='21'></el-input-number>
      </el-form-item>
    </el-form>
    
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>课程时间预览</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="assignExperi">关联实验信息</el-button>
      </div>
      <el-table
        :data="courseTableData"
        style="width: 100%">
        <el-table-column
          type="index"
          width="150">
        </el-table-column>
        <el-table-column
          prop="weekNum"
          label="第几周"
          width="180">
        </el-table-column>
        <el-table-column
          prop="weekDay"
          label="星期几"
          width="180">
        </el-table-column>
        <el-table-column
          label="课时">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ dependencyList.timeSlots[scope.row.timeSlot].timeSlotName }}
                ({{ dependencyList.timeSlots[scope.row.timeSlot].startTime }} —— {{ dependencyList.timeSlots[scope.row.timeSlot].endTime }})</span>
            </template>
        </el-table-column>
        <el-table-column
          label="关联实验"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.experi }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div>
      <div class="card" v-for="(item, index) in dependencyList.labs" :key="index">
        <div class="img">
          <img :src="plan_img">
        </div>
        <div class="context">
          <div class="card-address">
            <span>{{item.name}}</span>
          </div>
          <div class="card-population">
            <div class="card-population-total">
              <span>可容纳人数</span>
              <span class="card-population-number">{{item.maxNumber}}</span>
            </div>
            <div class="card-population-had">
              <el-popover
                placement="right"
                width="700"
                trigger="click">
                <div class="block">
                  <span class="demonstration">院系班级筛选</span>
                  <el-cascader
                    :options="department"
                    v-model="selectedOptions"
                    @change="handleChange">
                  </el-cascader>
                </div>
                <el-table :data="students" tooltip-effect="dark" style="width: 100%" @selection-change="sdudentSelectionChange">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column width="150" property="id" label="日期"></el-table-column>
                  <el-table-column width="100" property="name" label="姓名"></el-table-column>
                  <el-table-column width="300" property="roleName" label="地址"></el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                  <el-button type="primary" @change="confirmStudents">确定选择</el-button>
                  <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
                <span slot="reference" style="cursor: pointer">
                  <span>已安排学生</span>
                  <span class="card-population-number">0</span>
                </span>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实验选择 -->
    <el-dialog title="实验选择" width="890px" :visible.sync="experiTableVisible.visible">
      <el-alert
        :title="courseTableData.length + '节课，可以选择' + courseTableData.length + '个实验'"
        type="warning">
      </el-alert>
      <el-table
        ref="multipleTable"
        :data="experiTableVisible.data"
        tooltip-effect="dark"
        style="width: 780px"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="编号"
          width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="实验名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="220"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="排序"
          width="230">
          <template slot-scope="scope">
            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" @click="confirmAssignExperi">选中</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import card from './card'
import request from '@/utils/request'
import plan_img from '@/assets/img/plan_img.png'

export default {
  components: {
    card
  },
  created() {
    this.getWeekCount()
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    'form.ruleType': function(newVal, oldVal) {
      if (newVal === 3) {
        this.form.weekDays = [0, 1, 2, 3, 4, 5, 6]
      } else {
        if ((newVal === 1 && this.form.startWeek % 2 === 0) || (newVal === 2 && this.form.startWeek % 2 !== 0)) {
          alert('请先调整起始周')
          this.form.ruleType = oldVal
        }
        this.form.weekDays = []
      }
    },
    'form.region': function(newVal, oldVal) {
      request.get(`items/lab/labs?experitypeId=${newVal}`).then(res => {
        this.dependencyList.labs = res.content
      })
    }
  },
  data() {
    return {
      num: 1,
      dependencyList: {
        weekDays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
        ruleTypes: ['每周上课', '单周上课', '双周上课', '整周上课'],
        timeSlots: [],
        experitypes: [],
        labs: []
      },
      experiTableVisible: {
        visible: false,
        data: [],
        multipleSelection: []
      },
      form: {
        weekDays: [],
        weeks: [],
        ruleType: 0,
        startWeek: 1,
        weekCount: 1,
        timeSlots: [],

        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      tableData3: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: [],
      plan_img,
      department: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }],
      students: []
    }
  },
  computed: {
    // 计算选择有哪些周
    courseTableData: {
      get: function() {
        const tableList = []
        // 如果单双周课，那么步长为2
        let stepCount = 1
        if (this.form.ruleType === 2 || this.form.ruleType === 1) {
          stepCount = 2
        }
        // 从第几周开始
        let weekNumberTemp = this.form.startWeek
        // 根据从第几周开始、有几周：把要安排的周存下来；
        var weeks = []
        // debugger
        for (let i = 0; i < this.form.weekCount; i++) {
          // 把合法的第几周这个值放入数组
          weeks.push(weekNumberTemp)
          this.form.weekDays.forEach(weekDay => {
            this.form.timeSlots.forEach(timeSlot => {
              tableList.push({
                'weekNum': weekNumberTemp,
                'weekDay': this.dependencyList.weekDays[weekDay],
                'timeSlot': timeSlot
              })
            })
          })
          weekNumberTemp += stepCount

          if (weekNumberTemp > 18) {
            alert('周数不够，请调整规则')
            return tableList
          }
        }
        return tableList
      },
      set: function(newValue) {
        return newValue
      }
    }
  },
  mounted() {
    // 时间段列表
    request.get('/items/labTimerSlot').then(res => {
      this.dependencyList.timeSlots = res.content
    })
    request.get('/labs/experitype/page').then(res => {
      this.dependencyList.experitypes = res.content.records
    })
    request.get('ac/userManage/userList').then(res => {
      this.students = res.content.records
    })
    request.get('items/labExperiment/page?size=50').then(res => {
      this.experiTableVisible.data = res.content.records
    })
  },
  methods: {
    assignExperi() {
      this.experiTableVisible.visible = true
    },
    handleSelectionChange(val) {
      if (val.length > this.courseTableData.length) {
        alert('已超过所定课时数')
        return
      }
      this.experiTableVisible.multipleSelection = val
    },
    confirmAssignExperi(val) {
      const courseTableData = this.courseTableData
      courseTableData.forEach((element, index) => {
        this.courseTableData[index].experi = this.experiTableVisible.multipleSelection[index].name
      })
      this.courseTableData = courseTableData
    },
    getWeekCount() {
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    sdudentSelectionChange(val) {
      // this.multipleSelection = val
    }
  }
}
</script>
</script>

<style scoped>
.card {
  width: 265px;
  height: 138px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(233, 233, 233, 1);
  border-radius: 2px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  text-align: left;
  line-height: 22px;
  float: left;
}
.img {
  width: 24px;
  width: 24px;
  margin-left: 30px;
  margin-top: 20px;
  float: left;
}
.img img {
  width: 24px;
  height: 24px;
}
.context {
  float: left;
  margin-left: 30px;
}
.card-address {
  width: 178px;
  margin-top: 20px;
  word-wrap: break-word;
}
.card-population {
  margin-top: 15px;
}
.card-population-total {
  float: left;
}
.card-population-had {
  margin-left: 15px;
  float: left;
  color: #0066ff;
}
.card-population-number {
  display: block;
  margin-top: 5px;
  font-size: 24px;
  font-weight: 700;
}
</style>
